<template>
  <div>
    <div>
      <van-nav-bar title="时光机" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="birthday"
        name="birthday"
        label="出生日期"
        placeholder="填写出生日期，比如1999.9.9"
        :rules="[{ required: true, message: '请填写出生日期' }]"
      />
      <van-field
        v-model="longevity"
        name="longevity"
        label="预期寿命"
        placeholder="填写预期寿命，比如99"
        :rules="[{ required: true, message: '请填写预期寿命' }]"
      />
      <van-row type="flex" justify="center">
        <van-col span="12">
          <div style="margin-top: 16px;">
            <van-button round block type="info" style="color:#fff;" native-type="submit">提交</van-button>
          </div>
        </van-col>
      </van-row>
    </van-form>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar } from "vant";
import { Form } from "vant";
import { Field } from "vant";
import { Col, Row } from "vant";

Vue.use(Col);
Vue.use(Row);
Vue.use(Field);
Vue.use(Form);
Vue.use(NavBar);
export default {
  name: "TimeMachine",
  created() {},
  data() {
    return {
      birthday: "",
      longevity: ""
    };
  },
  computed: {
    birthdayarray: function() {
      return this.birthday.split(".");
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    onSubmit(values) {
      console.log("submit", values);
      this.birthday = values.birthday;
      this.longevity = values.longevity;
      console.log(this.birthdayarray);
      window.location.href="https://ainotebook.51open.net/static/html/live.html?year="+this.birthdayarray[0]+'&month='+this.birthdayarray[1]+'&day='+this.birthdayarray[2]+'&longevity='+this.longevity;
    }
  }
};
</script>
<style scoped>
</style>